<script setup lang="ts">
import { ref, computed } from 'vue'
import { storeToRefs } from "pinia"
import { useCounterStore,useUserInfo } from "@/stores/counter"
import { useRouter } from "vue-router"
import {showToast} from "vant"
const router = useRouter();
const store = useCounterStore();
const { shopcartList } = storeToRefs(store);
const { changeShopCartAllItem } = store;
const userStore = useUserInfo();
const {isLogin} = storeToRefs(userStore);
const manySelect = ref(0);

const allPrice = computed(() => {
  let all = 0;
  manySelect.value = 0;
  shopcartList.value.forEach(el => {
    if (el.isSelect) {
      all += (Number.parseFloat(el.salesPrice) / 100) * el.count;
      manySelect.value++;
    }
  });
  return all;
});
const allSelect = computed(() => {
  let select = true;
  shopcartList.value.forEach(el => {
    if (!el.isSelect) {
      select = false;
    }
  });
  return select;
});
const changeSelect = () => {
  console.log(allSelect.value);
  let check = !allSelect.value;
  let list = shopcartList.value.map(el => {
    el.isSelect = check;
    return el;
  });
  changeShopCartAllItem(list);
}

const toPay = () => {
  if(!isLogin.value){
    router.push({
      name:"login"
    });
    return;
  }
  if(manySelect.value<=0){
    showToast("请选择要结算的商品");
    return;
  };
  router.push({
    name: "pay"
  });
}
</script>
<template>
  <div class="shop-settlement">
    <div class="left" @click.stop="changeSelect">
      <div class="svg-box">
        <svg v-if="!allSelect" t="1678869065413" class="icon" viewBox="0 0 1024 1024" version="1.1"
          xmlns="http://www.w3.org/2000/svg" p-id="2728" width="16" height="16">
          <path
            d="M512 192c176.768 0 320 143.274667 320 320 0 176.768-143.274667 320-320 320-176.768 0-320-143.274667-320-320 0-176.768 143.274667-320 320-320z m0 41.28c-153.962667 0-278.72 124.757333-278.72 278.72S358.037333 790.72 512 790.72 790.72 665.962667 790.72 512 665.962667 233.28 512 233.28z"
            fill="#151515" p-id="2729"></path>
        </svg>
        <svg v-else t="1678872347980" class="icon" viewBox="0 0 1024 1024" version="1.1"
          xmlns="http://www.w3.org/2000/svg" p-id="3296" width="16" height="16">
          <path
            d="M501.504 170.666667c182.741333 0 330.816 148.117333 330.816 330.837333 0 182.741333-148.117333 330.816-330.816 330.816C318.72 832.32 170.666667 684.202667 170.666667 501.504 170.666667 318.72 318.784 170.666667 501.504 170.666667z m0 42.666666C342.336 213.333333 213.333333 342.314667 213.333333 501.504c0 159.146667 128.981333 288.149333 288.170667 288.149333 159.146667 0 288.149333-128.981333 288.149333-288.149333C789.653333 342.336 660.693333 213.333333 501.504 213.333333z m144.064 150.549334a25.152 25.152 0 0 1 36.053333 35.050666l-218.666666 224.896a25.152 25.152 0 0 1-35.242667 0.789334l-106.197333-99.968a25.152 25.152 0 1 1 34.453333-36.608l88.405333 83.2 201.194667-207.36z"
            fill="#e0253c" p-id="3297"></path>
        </svg>
      </div>
      全选
    </div>
    <div class="right">
      <div class="price">
        合计:
        <span>&yen;</span>
        {{ allPrice }}
      </div>
      <div class="btn" @click.stop="toPay">结算({{ manySelect }})</div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.shop-settlement {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;

  .left {
    display: flex;
    align-items: center;
    margin-left: .15rem;

    .svg-box {
      width: .3rem;
      height: .3rem;
      margin-right: .05rem;
    }
  }

  .right {
    height: 100%;
    display: flex;
    align-items: center;

    .price {
      font-size: .14rem;
      color: var(--text-red);
      font-weight: bold;

      >span {
        font-size: .13rem;
      }
    }

    .btn {
      width: 1.1rem;
      height: 100%;
      background-color: var(--bgc-red);
      background-image: linear-gradient(to right top, var(--bgc-red), var(--bgc-red-deep));
      color: var(--text-white);
      line-height: .5rem;
      text-align: center;
      border-radius: .1rem 0 0 0;
      margin-left: .1rem;
    }
  }
}</style>